<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	table.table{
		background:#fff;
	}
	table.table .light_color th{
		font-weight:400;
	}
	table.table tr td{
		font-size:12px;
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">{{type==1?'页面性能':'慢页面性能'}}</h1>
		<commonsearch :done="getDataForTime"></commonsearch>
	</div>
	<div class="com_topic mb20 mt20"><span class="iconfont">&#xe63a;</span>统计某一页面的平均访问性能指标，每次会话的首次访问性能指标。</div>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':tabtype==2}" @click="checkoutLabel(2)">首次渲染性能统计</div>
		<div class="item" :class="{'active':tabtype==1}" @click="checkoutLabel(1)">平均渲染性能统计</div>
	</div>
	<div>
		<!-- 公共搜索条件 -->
		<div class="com_search">
			<div class="item">
				<div>
					<span class="name">输入页面地址：</span>
					<input class="inp" v-model="url" placeholder="选填、输入页面地址" type="text">
					<button class="btn btn-default" @click="searchForUrl">搜索</button>
				</div>
				<div class="ml30">
					<span class="name">选择日期：</span>
					<input id="zane-calendar-1" class="inp w-200" type="text" placeholder="选择日期查询">
				</div>
			</div>
			<div class="tipscolor mt10" v-if="errText">{{errText}}</div>
		</div>
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listdata.length">
				<tr class="light_color">
					<th>URL</th>
					<th>调用次数</th>
					<th>页面加载时间</th>
					<th>白屏时间</th>
					<th>DOM构建时间</th>
					<th>解析dom耗时</th>
					<th>DNS解析时间</th>
					<th>TCP连接时间</th>
					<th>request请求耗时</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in listdata">
					<td><a href="javascript:" @click="goToList(item)">{{item._id.url}}</a></td>
					<td class="tc" >{{item.count}}</td>
					<td class="red tc">{{item.load_time|toFixed(true)}}</td>
					<td class="red tc">{{item.white_time|toFixed}}</td>
					<td class="red tc">{{item.dom_time|toFixed(true)}}</td>
					<td class="tc">{{item.analysisDom_time|toFixed}}</td>
					<td class="tc">{{item.dns_time|toFixed}}</td>
					<td class="tc">{{item.tcp_time|toFixed}}</td>
					<td class="tc">{{item.request_time|toFixed}}</td>
					<td><a href="javascript:" @click="goToList(item)">详情</a></td>
				</tr>
			</table>
		</div>
	</div>
	<!--  分页 -->
	<div class="tc common_page_style mt10" v-show="isLoadend&&listdata.length">
		<div id="copot-page" class="copot-page"></div>
	</div>
	<!-- 暂无数据 -->
	<div class="tc mt20" v-if="!listdata.length">暂无数据!</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				listdata: [],
				pageNo: 1,
				pageSize: 30,
				totalNum: 0,
				beginTime: '',
				endTime: '',
				isLoadend: false,
				appId: util.getStorage('local', 'appId'),
				type: util.getQueryString('type') || 1, //访问速度类型 1：正常  2：慢
				url:'',
				errText:'',
				tabtype:2,
			}
		},
		filters: {
			toFixed: window.Filter.toFixed
		},
		mounted() {
			this.getDataForTime();
			this.searchForTime();
		},
		methods: {
			getDataForTime(){
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime
				this.getinit();
			},
			checkoutLabel(type) {
				this.tabtype = type || 1;
				this.getDataForTime();
			},
			getinit() {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + 'api/v1/pages/getAveragePageList',
					data: {
						type:this.type,
						appId:this.appId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						beginTime: this.beginTime,
						endTime: this.endTime,
						url: this.url,
						tabtype: this.tabtype,
					},
					success: data => {
						this.isLoadend = true;
						if (!data.data.datalist && !data.data.datalist.length) return;
						this.listdata = data.data.datalist;
						new Page({
							parent: $("#copot-page"),
							nowPage: this.pageNo,
							pageSize: this.pageSize,
							totalCount: data.data.totalNum,
							callback: (nowPage, totalPage) => {
								this.pageNo = nowPage;
								this.getinit();
							}
						});
					}
				})
			},
			searchForUrl(){
				this.getinit();
			},
			searchForTime(){
				zaneDate({
					elem: '#zane-calendar-1',
					type: 'doubleday',
					format: 'yyyy/MM/dd',
					done: (fulltime, begintime, endtime) => {
						this.beginTime = begintime ? begintime + ' 00:00:00' : '';
						this.endTime = endtime ? endtime + ' 23:59:59' : '';
						this.errText = '';
						let beginstrap = new Date(`${this.beginTime}`).getTime();
						let endstrap = new Date(`${this.endTime}`).getTime();
						let between = endstrap - beginstrap;
						if (between < 0) {
							this.errText = "结束时间不能小于开始时间。";
							return false;
						}
						if (between > 259200000) {
							this.errText = "时间粒度选择只支持3天以内的时间段查询。";
							return false;
						}
						this.getinit();
					},
				});
			},
			goToList(item) {
				if (this.type && this.type == 2) {
					util.setStorage('session', 'slowpagesItemData', JSON.stringify(item))
					location.href = "/web/slowpageslist"
				} else {
					util.setStorage('session', 'pagesItemData', JSON.stringify(item))
					location.href = "/web/pageslist"
				}
			}
		}
	})
</script>